<template>
    <el-dialog :title="title" :visible.sync="visible">
        <el-form
            :model="form"
            :rules="rules"
            :ref="formRef"
            :size="$formSize"
            label-width="90px"
        >
            <el-form-item label="博文标题" prop="title">
                <el-col :span="18">
                    <el-input
                        clearable
                        v-model="form.title"
                        auto-complete="off"
                        placeholder="请输入博文标题"
                    />
                </el-col>
            </el-form-item>

            <el-form-item label="博文类型" prop="category_id">
                <el-select
                    v-model="form.category_id"
                    placeholder="请选择分类"
                    @change="getTagList"
                >
                    <el-option
                        v-for="item in categoryOption"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id"
                        :disabled="item.disabled"
                    >
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="摘要" prop="summary">
                <el-col :span="18">
                    <el-input v-model="form.summary" type="textarea" />
                </el-col>
            </el-form-item>

            <el-form-item label="标图" prop="image_url">
                <Uploader
                    v-model="form.image_url"
                    :on-success="thumbUpload"
                    :on-remove="removeThumbUpload"
                />
            </el-form-item>

            <el-form-item label="内容" prop="content">
                <Tinymce v-model="form.content" :config="{ height: 600 }" />
            </el-form-item>

            <el-form-item label="标签" prop="tag_ids">
                <el-popover placement="right" width="400" trigger="click">
                    <el-checkbox-group
                        v-model="form.tag_ids"
                        size="mini"
                        @change="handleCheckedCitiesChange"
                    >
                        <el-checkbox
                            style="margin: 10px"
                            border
                            v-for="item in tagList"
                            :key="item.id"
                            :label="item.id"
                        >
                            {{ item.title }}
                        </el-checkbox>
                    </el-checkbox-group>

                    <el-button slot="reference" icon="el-icon-plus" />
                </el-popover>

                <div class="el-form-tag">
                    <el-tag v-for="item in selectTags" :key="item.id">
                        {{ item.title }}
                    </el-tag>
                </div>
            </el-form-item>

            <el-form-item label="推荐" prop="support">
                <el-switch v-model="form.support"></el-switch>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button :size="$btnSize" @click="visible = false">
                取 消
            </el-button>
            <el-button
                type="warning"
                :size="$btnSize"
                :loading="loading"
                @click="onSubmit(2)"
            >
                草稿箱
            </el-button>
            <el-button
                type="primary"
                :size="$btnSize"
                :loading="loading"
                @click="onSubmit(1)"
            >
                发 布
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import { adminArticle as Api } from "api";

export default {
    props: {
        id: {
            type: [Number, String],
        },
    },
    data() {
        return {
            // 状态
            loading: false, // 按钮等待
            visible: false, // 弹窗开关
            checkAll: true, // 标签选择弹窗开关
            isIndeterminate: false,
            title: "", // 标题

            formRef: "formRef", // ref

            categoryOption: [], // 分类
            tagList: [], // 标签列表
            selectTags: [], // 选中的标签

            form: {
                title: "",
                category_id: "",
                summary: "",
                support: 0,
                image_url: "",
                content: "",
                tag_ids: [], // 选中的标签ID组
            },

            // 验证
            rules: {
                title: [{ required: true, message: "请填写文章标题" }],
                category_id: [{ required: true, message: "请选择分类" }],
                summary: [{ required: true, message: "请填写摘要" }],
                content: [{ required: true, message: "请输入内容" }],
                tag_ids: [{ required: true, message: "请勾选标签" }],
            },
        };
    },
    methods: {
        /* 初始化 */
        init() {
            this.title = this.id ? "编辑" : "新增";
            this.getCategoryList();
            this.getTagList();

            if (this.id) this.getById();
        },

        /* 获取分类列表 */
        async getCategoryList() {
            const { code, data } = await this.$axios.get(Api.articleCategory);
            if (code === 200) {
                this.categoryOption = data.list;
            }
        },

        /* 获取标签列表 */
        async getTagList() {
            let category_id = this.form.category_id;

            const { code, data } = await this.$axios.get(Api.articleTag, {
                params: {
                    category_id,
                },
            });

            if (code == 200) {
                this.tagList = data.tags;
            }

            this.handleCheckedCitiesChange();
        },

        /* 获取详情 */
        async getById() {
            const { code, data } = await this.$axios.get(Api.getById, {
                params: { id: this.id },
            });

            if (code == 200) {
                let tag_ids = [];

                if (data.list.tag_ids) {
                    let ids = data.list.tag_ids.split(",");
                    for (let i in ids) {
                        tag_ids.push(Number(ids[i]));
                    }
                }

                this.form = {
                    title: data.list.title,
                    category_id: data.list.category_id,
                    summary: data.list.summary,
                    support: data.list.support == 1 ? true : false,
                    image_url: data.list.image_url,
                    content: data.list.content,
                    tag_ids: tag_ids,
                };

                this.getTagList();
            }
        },

        /* 图标上传 */
        thumbUpload(fileStr) {
            this.form.image_url = fileStr;
        },

        /* 删除图标 */
        removeThumbUpload(fileStr) {
            this.form.image_url = fileStr;
        },

        /* 勾选标签 */
        handleCheckedCitiesChange() {
            let selectTags = [];
            this.tagList.forEach((item) => {
                let checked = this.form.tag_ids.some((v) => v == item.id);

                if (checked) {
                    selectTags.push(item);
                }
            });

            this.form.tag_ids = selectTags.map((v) => v.id);

            this.selectTags = selectTags;
        },

        /* 提交 */
        async onSubmit(status) {
            this.$refs[this.formRef].validate((valid) => {
                if (valid) {
                    this.loading = true;
                }
            });

            if (this.loading) {
                let url = this.id ? Api.update : Api.add;

                let params = {
                    title: this.form.title,
                    status: status,
                    category_id: this.form.category_id,
                    summary: this.form.summary,
                    support: this.form.support ? 1 : 0,
                    image_url: this.form.image_url,
                    content: this.form.content,
                    tag_ids: this.form.tag_ids.join(","),
                };

                if (this.id) params.id = this.id;

                const { code, msg, data } = await this.$axios.post(url, params);

                if (code === 200) {
                    this.$msg.success(msg);
                    this.$parent._initTableSelectionIds();

                    this.visible = false;
                } else {
                    this.$msg.error(msg ? msg : data);
                }

                this.loading = false;
            }
        },

        /* 重置表单 */
        resetForm() {
            this.selectTags = [];
            this.$refs[this.formRef].resetFields();
        },
    },
    watch: {
        visible(status) {
            if (status) {
                this.init();
            } else {
                this.resetForm();
            }
        },
    },
};
</script>

<style>
.el-form-tag {
    margin-top: 10px;
}
.el-form-tag span {
    margin-right: 5px;
}
</style>

